<template>
    <div class="app-container">
        <!--  这里的模糊查询是根据昵称进行模糊查询的  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="用户名称" class="item" prop="username">
                <el-input v-model="queryParams.username" placeholder="请输入用户名称" clearable style="width: 240px"
                          @keyup.enter.native="load"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="load">搜索</el-button>
                <el-button icon="refresh" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <!--按钮区域    -->
        <div style="margin:5px">
            <el-button type="primary" plain icon="plus" @click="openSelectUser">添加用户</el-button>
        </div>
        <!-- 列表区-->
        <el-table :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}" style="width: 100%">
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="userId" sortable label="ID"></el-table-column>
            <el-table-column prop="username" label="姓名"></el-table-column>
            <el-table-column prop="nickName" label="昵称"></el-table-column>
            <el-table-column prop="sex" label="性别">
                <template #default="scope">
                    <span v-if="scope.row.sex === '1'">男</span>
                    <span v-if="scope.row.sex === '0'">女</span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄"></el-table-column>

            <el-table-column prop="phone" width="180" label="电话"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template #default="scope">
                    <!--v-if="scope.row.userId !== 1"-->
                    <div>
                        <el-button type="text" icon="remove" @click="cancelAuthUser(scope.row)">取消授权</el-button>
                    </div>
                </template>

            </el-table-column>
        </el-table>
        <!--列表分页-->
        <div style="margin: 10px 0">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"> //双引号里面的total是定义一个变量，在这里定义了，就需要在下面data里面初始化一下
            </el-pagination>
        </div>

        <!-- 选择用户的弹窗 以组件的形式引入 并传递参数; @ok方法是接收子窗口的通知，在父页面进行刷新-->
        <select-user ref="select" :roleId="roleId" @ok="handleQuery"/>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import {ElMessage} from 'element-plus'
    import selectUser from "./selectUser";
    import qs from "qs";

    export default {
        name: "authuser",
        components:{selectUser},
        data() {
            return {
                title: '',
                dialogVisible: false,
                total: 0,  //默认10条
                tableData: [],
                single: true,
                currentPage: 1,
                pageSize: 5,
                // 查询参数
                queryParams: {},
                roleId: ''
            }
        },

        //页面加载完立即执行的方法
        mounted() {
            this.load();
        },

        methods: {
            //查询方法
            load() {
                this.roleId = this.$route.params && this.$route.params.roleId
                request.get("/sys/user/authuser/allocatedUserList", {
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        roleId: this.roleId,
                        username: this.queryParams.username
                    }
                }).then(res => {
                    if (res.code == 0) {
                        this.tableData = res.data.list
                        this.total = res.data.total
                    }

                })
            },

            //打开子组件弹窗  在这里调用的是子组件的方法
            openSelectUser() {
                this.$refs.select.show();
            },

            //接收子页面的通知，子页面操作完成后，父页面刷新列表
            handleQuery(){
              this.load();
            },

            //取消授权
            cancelAuthUser(row){
                const userId = row.userId;

                let data = { userId:userId,  roleId:this.roleId}
                request.post("/sys/role/cancelAuthUser",data).then(res =>{
                    if(res.code==0){
                        ElMessage.success('操作成功');
                       this.load()
                    }
                });

            },


            //在上面的data中，pageSize和currentPaage都有默认值，这里要触发分页，需要重新根据变量赋值
            //改变当前每页条数触发
            handleSizeChange(pageSize) {
                this.pageSize = pageSize
                this.load()
            },

            //改变当前页码触发
            handleCurrentChange(pageNum) {
                this.currentPage = pageNum
                this.load()
            },

            reset(){
                this.$resetForm('queryForm');
            },
        }

    }
</script>

<style scoped>

</style>
